<template>
	<view>
		<view class="header-section">
			<uni-card class="header-section-card">
				<template v-show:title>
					<view class="header-title">
						<view class="order">
							<uni-title type="h3" title="订单状态" />
						</view>
						<view class="status">
							<uni-indent-tag :status="order_info.orderStatus" :circle="true" />
						</view>
					</view>
				</template>
				<view>
					订单号:{{order_info.orderNo}}
				</view>
			</uni-card>
		</view>
		<view class="content-section">
			<uni-card>
				<template v-show:title>
					<uni-title type="h3" title="维修信息" />
				</template>
				<view class="section-title">
					维修项目:
					<text>{{order_info.customerFeedback}}</text>
				</view>
				<view class="section-title">
					维修时间:
					<text>{{order_info.reportedTime}}</text>
				</view>
				<view class="section-title">
					维修地址:
					<text>{{order_info.faultLocation}}</text>
				</view>
			</uni-card>
		</view>
		<view class="bottom-item">
			<view class="button-select">
				<button type="primary" @click="handleFrom">结束维修</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrder,
		updateOrder
	} from "@/api/repairManage/order.js"
	export default {
		data() {
			return {
				orderId: undefined,
				order_info: {}
			}
		},
		onLoad(options) {
			console.log("=========订单详情=========");
			this.orderId = options.orderId
		},
		created() {
			this.getOrtderInfo()
		},
		methods: {
			getOrtderInfo() {
				if (this.orderId == undefined){
					this.$modal.msgError("订单号错误")
				}
				console.log("========= 获取订单详情 =========");
				getOrder(this.orderId).then(res => {
					this.order_info = res.data
				})
			},
			// 提交表单
			handleFrom() {
				this.order_info.orderStatus = "3"
				console.log("========= 更新订单状态 =========");
				updateOrder(this.order_info).then(res =>{
					this.$modal.msgSuccess(res.msg)
				})
				console.log("========= 订单页面 =========");
				this.$tab.reLaunch("/pages/indent/index")
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.header-section {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: auto;


		.header-section-card {
			position: relative;
			// background-color: #FFFFFF;
			margin-top: 0.5%;
			border-radius: 5px;

			.header-title {
				position: relative;
				width: 100%;

				.order {
					display: inline-flex;
					// position: absolute;
				}

				.status {
					display: inline-flex;
					position: absolute;
					top: 10%;
					right: 5%;
				}
			}

		}
	}

	.content-section {
		position: relative;

		.section-title {
			position: relative;
			display: inline-flex;

			text {
				text-align: right;
			}
		}
	}

	.bottom-item {
		position: absolute;
		width: 100%;
		padding-bottom: 5%;
		bottom: 5%;

		.button-select {
			margin: auto;
			width: 90%;
		}
	}
</style>